<template>
	<view class="container">
		<view>
			<view class="text-15 flex justify-start align-center">
				<scroll-view scroll-x class="bg-white position nav text-666" scroll-with-animation
					:scroll-left="scrollLeft">

					<view class="cu-item" :class="TabCur==999?'color cur text-bold':''" @tap="tabSelect" :data-id="999">
						<view>全部</view>
					</view>
					<view class="cu-item" :class="item.id==TabCur?'color cur text-bold':''"
						v-for="(item,index) in classification1" @tap="tabSelect" :data-id="item.id">
						<view>{{item.name}}</view>
					</view>
				</scroll-view>
			</view>
			<block>

			</block>
			<view style="margin-top: 120rpx;">
				<view
					@click="toPage('/filePage/pages/orderServiceDetail/orderServiceDetail?serviceType=' + item.serviceType + '&id=' + item.id)"
					class="bg-white radius10 padding margin-sm" v-for='(item,index) in list' :key='index'>
					<view class="flex justify-between align-center text-bold">
						<view class="text-lg text-cut  text-333" style="width: 80%;">
							{{item.description}}
						</view>
						<view class="color text-sm">
							<block v-if='item.serviceStatus==0'>待付款</block>
							<block v-if='item.serviceStatus==1'>待接单</block>
							<block v-if='item.serviceStatus==2'>已接单</block>
							<block v-if='item.serviceStatus==3'>已完成</block>
							<block v-if='item.serviceStatus==4'>已验收</block>
							<block v-if='item.serviceStatus==5'>已评价</block>
							<block v-if='item.serviceStatus==6'>已取消</block>
							<block v-if='item.serviceStatus==7'>已退款</block>
						</view>
					</view>
					<view class="text-sm text-999 margin-top-sm flex justify-between">
						<view v-if="title!='配送订单'">{{item.sysCategoryName}}</view>
						<view v-if='item.receiverId==userId'>我接的单</view>
						<view v-if='item.userId == userId'>我发的单</view>
					</view>
					<view class="flex justify-between align-center text-bold margin-top">
						<view class="flex justify-start align-center">
							<view class="color">
								<text class="text-sm">¥ </text>
								<text class="text-17">{{item.price/100}}</text>
							</view>
							<view class="text-sm text-999 margin-left-sm">
								{{item.title}}
							</view>
						</view>
						<view class="text-red text-sm" v-if='item.pastTime>0'>
							<block v-if=" item.serviceStatus==0 || item.serviceStatus==1">
								订单剩余时间 {{item.pastTime}}小时
							</block>
						</view>
						<view class="text-red text-sm" v-else>
							<block v-if='item.serviceStatus==0 || item.serviceStatus==1||item.serviceStatus==6'>
								已过期
							</block>

						</view>
					</view>


					<view class="flex justify-end align-center margin-top"
						v-if='item.serviceStatus==2 && item.receiverId==userId '>
						<button class="btn round text-13 text-white bg-color" @click.stop="upImage(item)">上传凭证</button>
					</view>
					<view class="flex justify-end align-center margin-top"
						v-if='item.serviceStatus==0 && item.userId==userId'>
						<button class="btn round text-13 text-white bg-color" @click.stop="cancel(item)">取消</button>
						<button style="margin-left: 20rpx;" class="btn round text-13 text-white bg-color"
							@click.stop="wxPay(item)">支付</button>
					</view>


					<view class="flex justify-end align-center margin-top"
						v-if='item.serviceStatus==3 && item.userId==userId'>
						<button class="btn round text-13 text-white bg-color margin-left-sm"
							@click.stop="checkOutState(item)">验收</button>
					</view>
					<view class="flex justify-end align-center margin-top"
						v-if='item.serviceStatus==4 && item.userId==userId'>
						<button class="btn round text-13 text-white bg-color margin-left-sm"
							@click.stop="toPage2('/filePage/pages/addComment/addComment?item=',item)">评价</button>
					</view>
					<!-- && item.userId==userId -->
					<view class="flex justify-end align-center margin-top" v-if="item.serviceStatus==5">
						<button class="btn round text-13 text-white bg-color margin-left-sm"
							@click.stop="toPage('/filePage/pages/orderRecommend/orderRecommend?id='+item.id+'&userId='+item.userId+'&receiverId='+item.receiverId)">评论列表</button>
					</view>


				</view>
			</view>

		</view>
		<w-picker :visible.sync="visible" mode="selector" :default-props="defaultProps" default-type="id" value="1"
			:options="selectorList" @confirm="onConfirm($event)" @cancel="onCancel" ref="selector">
		</w-picker>
		<passkeyborad :money='money' @message='message' @close='close' :show="show"></passkeyborad>
		<uni-load-more :status="loading" />
		<view class="cu-modal" :class="{show:is_show}">
			<view class="cu-dialog bg-white">
				<view class="cu-bar justify-end">
					<view class="content text-15">上传凭证</view>
				</view>
				<view class="cu-form-group padding-top">
					<view class="grid col-3 grid-square flex-sub">
						<view class="bg-img" v-for="(item, index) in picList" :key="index">
							<image :src="item" mode="aspectFill" style="left: 0;"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
								<text class="cuIcon-close"></text>
							</view>
						</view>
						<view class="solids" @tap="ChooseImage">
							<text class="cuIcon-cameraadd"></text>
						</view>
					</view>
				</view>
				<view class="flex justify-between align-center padding text-lg">
					<view @click="is_show = false" class="bg-D7D7D7 text-gray radius5" style="padding: 32rpx 96rpx">
						取消
					</view>
					<button @click="submit" class="bg-color text-white radius5" style="padding: 32rpx 96rpx">
						确定
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import BetterPull from '@/common/util/BetterPull'
	import passkeyborad from '@/components/yzc-paykeyboard/yzc-paykeyboard.vue'
	export default {
		mixins: [
			BetterPull({
				async getPage(page, done) {
					this.loading = 'loading';
					const obj = {
						pageNum: page,
						pageSize: 10,
						serviceType: this.serviceType,
						userId: uni.getStorageSync('userId'),
						receiverId: uni.getStorageSync('userId')

					}

					if (this.TabCur != 999) {
						obj['serviceStatus'] = this.TabCur
					}
					const [err, res] = await this.$get(this.$api.listOrderServicePool, obj)
					if (res) {
						var data = res.data.list
						done(data);
						if (data.length < 10) {
							this.loading = 'noMore';
						} else {
							this.loading = 'more';
						}

					}
					if (err) {
						done([]);
						this.loading = 'noMore';
					}
				}
			})
		],
		components: {
			passkeyborad
		},
		data() {
			return {
				baseUrl: this.$config.baseUrl,
				title: '',
				status: 1,
				loading: "more",
				serviceType: '',
				TabCur: '999',
				scrollLeft: 0,
				userId: uni.getStorageSync('userId'),
				classification1: [{
						name: '待付款',
						id: '0'
					},
					{
						name: '待接单',
						id: '1'
					}, {
						name: '已接单',
						id: '2'
					}, {
						name: '已完成',
						id: '3'
					},
					{
						name: '已验收',
						id: '4'
					},
					{
						name: '已评价',
						id: '5'
					},
					{
						name: '已取消',
						id: '6'
					},
					{
						name: '已退款',
						id: '7'
					}

				],
				selectorList: [{
					name: '微信',
					id: 1
				}, {
					name: '余额支付',
					id: 2
				}],
				defaultProps: {
					"label": "name",
					"value": "id"
				},
				visible: false,
				serviceNo: '',
				show: false,
				password: 0,
				money: 0,
				index: 1,
				is_show:false,
				picList:[],
				item:{}
			};
		},
		onUnload() {
			uni.switchTab({
				url: '/pages/file/file'
			})
		},
		onLoad(options) {
			if (options.title) {
				uni.setNavigationBarTitle({
					title: options.title
				})
				this.title = options.title
				console.log(this.title)
				if (options.title == '普通订单') {
					this.serviceType = 1

				} else {
					this.serviceType = 2
				}
			}
		},
		methods: {
			upImage(e){
				this.item = e 
				this.is_show = true
			},
			async ChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album"], //从相册选择
					success: (res) => {
						// console.log(res)
						this.$upload(res.tempFilePaths[0]).catch((req) => {
							// console.log(req);
							if(this.picList.length==0){
								this.picList.push(req.data);
							}else{
								this.picList.splice(0,1,req.data)
							}
							
							
						});
					},
				});
			},
			DelImg(e) {
				uni.showModal({
					title: "提示",
					content: "确定要删除吗？",
					cancelText: "取消",
					confirmText: "确定",
					success: (res) => {
						if (res.confirm) {
							this.picList.splice(e.currentTarget.dataset.index, 1);
						}
					},
				});
			},
			checkOut(status) {
				console.log(status)
				this.status = status
			},
			close() {
				console.log(111111)
				this.show = false
			},
			message(password) {
				console.log(password)
				var CusBase64 = require('@/common/js/base64.js');
				//函数调用
				var passWord = CusBase64.CusBASE64.encoder(password);
				this.$get(this.$api.verifyPayPassWord, {
					passWord,
					userId: uni.getStorageSync('userId')
				}).then(res => {
					const [err, rs] = res
					if (rs) {
						const data = {
							orderNo: this.serviceNo,
							orderType: this.serviceType
						};
						this.$get(this.$api.orderService_accountPay, data).then(result => {
							const [err, rs] = result
							if (rs) {
								this.$util.msg(rs.message)
								this.show = false
								this.Refresh()

							}
						})

					}
					if (err) {
						this.show = false
						if (err.message == '请去设置密码！') {
							setTimeout(() => {
								uni.navigateTo({
									url: '/pagesA/pages/setPassword/setPassword'
								})
							}, 1500)
						}
					}
				})

			},
			toPage(url) {
				this.$util.openNewPage(url)
			},
			toPage2(url, item) {
				const obj = {
					description: item.description,
					descPic: item.descPic,
					id: item.id
				}
				if (item.shopId) {
					obj['shopId'] = item.shopId
				}
				console.log(item.description)
				this.$util.openNewPage(url +JSON.stringify(obj))
			},
			tabSelect(e) {
				console.log(e)
				if (e.currentTarget.dataset.id != 999) {
					this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				}
				this.TabCur = e.currentTarget.dataset.id;
				this.Refresh();
			},
			submit() {
				const that = this
				// uni.showModal({
				// 	title: '提示',
				// 	content: '你确定更新完成状态',
				// 	success: function(res) {
				// 		if (res.confirm) {
				// 			console.log('用户点击确定');
							const data = {
								orderServiceId: this.item.id,
								fileUrl:this.picList[0]
							}
							that.$get(that.$api.updateDeliveryToDone, data).then(res => {
								const [err, rs] = res
								if (rs) {
									that.$util.msg(rs.message)
									that.is_show = false
									that.picList = []
									that.Refresh();
								}
							})

				// 		} else if (res.cancel) {
				// 			console.log('用户点击取消');
				// 		}
				// 	}
				// });
			},
			checkOutState(item) {
				const that = this
				uni.showModal({
					title: '提示',
					content: '你确定验收该订单吗',
					success: function(res) {
						if (res.confirm) {
							const data = {
								orderServiceId: item.id
							}
							that.$get(that.$api.updateToAccepted, data).then(res => {
								const [err, rs] = res
								if (rs) {
									that.$util.msg(rs.message)
									that.Refresh();
								}
							})

						} else if (res.cancel) {}
					}
				});
			},
			wxPay(item) {
				this.visible = true
				this.serviceNo = item.serviceNo
				this.money = item.price
				console.log(this.money)
			},
			onCancel() {
				this.visible = false
			},
			async onConfirm(item) {
				console.log(item)
				const that = this

				// #ifdef  MP-WEIXIN
				const data = {
					orderNo: this.serviceNo,
					orderType: this.serviceType,
					payWay: 1,
					appId: this.$config.wxAppId,
					openId: uni.getStorageSync('openid')
				};
				// #endif


				// #ifdef  APP-PLUS
				const data = {
					orderNo: this.serviceNo,
					orderType: this.serviceType,
					payWay: 2,
					appId: this.$config.appId,
					openId: uni.getStorageSync('openid')
				};
				// #endif
				if (item.value == 1) {
					const [error, rs] = await this.$get(this.$api.weixinPay, data);
					if (rs) {
						console.log(rs);
						const data = rs.data;
						// #ifdef  MP-WEIXIN
						uni.requestPayment({
							provider: "wxpay",
							appId: data.appId,
							timeStamp: data.timeStamp,
							nonceStr: data.nonceStr,
							package: data._package,
							signType: data.signType,
							paySign: data.paySign,
							success: function(res) {
								console.log("success:" + JSON.stringify(res));
								that.Refresh();

							},
							fail: function(err) {
								console.log("fail:" + JSON.stringify(err));
							},
						});
						// #endif

						// #ifdef  APP-PLUS
						uni.requestPayment({
							"provider": "wxpay",
							"orderInfo": {
								"appid": data.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
								"noncestr": data.nonceStr, // 随机字符串
								"package": data._package, // 固定值
								"partnerid": data.partnerid, // 微信支付商户号
								"prepayid": data.prepayid, // 统一下单订单号 
								"timestamp": data.timeStamp, // 时间戳（单位：秒）
								"sign": data.sign // 签名，这里用的 MD5 签名
							},
							success(res) {
								that.Refresh();
							},
							fail(e) {}
						})
						// #endif
					}
				} else {
					this.show = true

				}

			},
			cancel(item) {
				const that = this
				uni.showModal({
					title: '提示',
					content: '你确定取消该订单吗',
					success: function(res) {
						if (res.confirm) {
							const data = {
								orderServiceId: item.id,
							}
							that.$get(that.$api.updateToClosed, data).then(res => {
								const [err, rs] = res
								if (rs) {
									that.$util.msg(rs.message)
									that.Refresh();
								}
							})

						} else if (res.cancel) {

						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs {
		view {
			border-bottom: 6rpx solid #fff;
		}

		.on {
			font-weight: bold;
			color: #221815;
			border-bottom: 6rpx solid #ED7200;
		}
	}

	.btn {
		padding: 20rpx 50rpx;
	}

	.btn2 {
		padding: 20rpx 24rpx;
		border: 2rpx solid;
	}

	.cur>view {
		border-bottom: 4rpx solid;
		width: 100%;
		height: 100%;
	}

	.nav .cu-item.cur {
		border-bottom: 0;
	}

	.position {
		position: fixed;
		background-color: #fff;
		z-index: 99;
		top: 0rpx;
	}
</style>
